<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>门店收入报表</title>
    <#include "/common/link.ftl" >
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >

    <#assign currentMenu="businessReport"/>

    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>门店收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 1200px;height:600px;"></div>

                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '按${groupType}分组统计'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['总订单数', '总消费金额', '总优惠金额','总实收金额']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ${groupTypeList},
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '金额(元)',
                                min: 0,
                                // max: 250,
                                // interval: 50,
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            {
                                type: 'value',
                                name: '数量',
                                min: 0,
                                //max: 25,
                                // interval: 5,
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '总消费金额',
                                type: 'bar',
                                data: ${totalAmountList},
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name: '总优惠金额',
                                type: 'bar',
                                data: ${discountAmountList}
                            },
                            {
                                name: '总实收金额',
                                type: 'bar',
                                data: ${payAmountList}
                            },
                            {
                                name: '总订单数',
                                type: 'line',
                                yAxisIndex: 1,
                                data: ${numberList}
                            }
                        ]
                    };



                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>

            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>



</body>
</html>